<template>
  <page-card title="解析器管理"
             sub-title="编辑"
             :need-back="true">
    <a-form :form="form"
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 12 }">
      <a-form-item label="ID"
                   v-show="false">
        <a-input v-decorator="['id']" />
      </a-form-item>
      <a-form-item label="解析器名称"
                   required>
        <a-input placeholder="请输入" :maxLength="100"
                 v-decorator="['translationName',{rules: [{ pattern: /^\S*$/, message: '不可包含空格符' },{
                   required: true, message: '请输入解析器名称'
                 }]}]" />
      </a-form-item>
      <a-form-item label="输入解析接口">
        <a-input placeholder="请输入" :maxLength="100"
                 v-decorator="['paramAddressIn',{rules: [{ pattern: /^\S*$/, message: '不可包含空格符' },{
                   required: false, message: '请输入输入解析接口'
                 }]}]" />
      </a-form-item>
      <a-form-item label="输出解析接口">
        <a-input placeholder="请输入" :maxLength="100"
                 v-decorator="['paramAddressOut',{rules: [{ pattern: /^\S*$/, message: '不可包含空格符' },{
                   required: false, message: '请输入输出解析接口'
                 }]}]" />
      </a-form-item>
      <a-form-item label="描述">
        <a-textarea :maxLength="200"
                    placeholder="请输入描述"
                    v-decorator="['txtdesc']"
                    style="resize:none; height:85px"></a-textarea>
      </a-form-item>
      <a-form-item label="是否启用">
        <a-switch checked-children="是"
                  un-checked-children="否"
                  v-decorator="['status', {
                    valuePropName: 'checked',
                    initialValue: true
                  }]" />
      </a-form-item>
      <a-form-item label=" "
                   :colon="false">
        <div style="text-align:center">
          <a-button type="primary"
                    action
                    @click="handleSave">保存</a-button>
          <!-- <a-button @click="handleCancel"
                    style="margin-left:30px;">取消</a-button> -->
        </div>
      </a-form-item>
    </a-form>
  </page-card>
</template>

<script>
import { getByIdTranslation, saveOrUpdateTranslation } from '../../../api/exchanger/index'
export default {
  name: 'ParserEdit',
  data () {
    return {
      form: this.$form.createForm(this),
      idNum: '' // 页面为编辑时的id
    }
  },
  created () {
    this.idNum = this.$route.query.id
    if (this.idNum != '') {
      this.getInfoByID(this.idNum)
    }
  },
  methods: {
    // 保存
    handleSave (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (err) {
          return
        }
        values.status = values.status ? '1' : '0'
        saveOrUpdateTranslation(values).then((res) => {
          // this.message.success(values.id ? '修改成功！' : '新增成功！')
          this.$router.go(-1)
        })
      })
    },
    // 根据id返回详情
    getInfoByID (id) {
      getByIdTranslation(id).then(res => {
        let t = true, f = false
        res.status = res.status == '1' ? t : f
        this.form.setFieldsValue(res)
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>